<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加新坐标</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        html{height:100%;}  
        body{height:100%;margin:0px;padding:0px}  
        *{
            margin:0;
            padding: 0;
        }
        img{
            display: block;
        }
        a{
            text-decoration: none;
        }
        .info{
            width: 320px;
        }
        .right{
            float: right;
        }
        .top{
            height: 30px;
            background: black;
            padding:0px auto;
            color:#FFF;
            font-size: 15px;
        }
        .top a{
            color:#FFF;
        }
        .nav{
            width:1080px;
            margin:0px auto;
            line-height: 30px;
        }
        .nav li{
            float: left;
            margin: 0 5px;
            padding: 0 5px;
            font-weight: 700;
        }
        .nav li a{
            font-size: 16px;
        }
        .userlogin{
            float: right;
        }
        .header{
            height:100px;
            background:#521368;
        }
        .header a{
            color:#BBB;
            font-size: 13px;
        }
        .logo{
            position: relative;
            float:left;
            left:100px;
            height: 100px;
        }
        #container{height:100%} 
        .infotitle{
            color: #2d64b3;
            font-weight:800;
        } 
        .info{
            font-size: 13px;
            color:#555;
            line-height: 1.5;
            margin-top:5px;
        }
    </style>
</head>
<body style="background:#CBE1FF">
    <header>
        <div class="top">
            <div class="nav">欢迎来到小K商城！
                <div class="userlogin">
                    <a href="login.html">登录</a>|
                    <a href="reg.html">注册</a>
                </div>
            </div>
        </div>
        <div class="header">
            <div class="logo">
                <a href="/">
                    <img src="/img/datalogo.png" alt="" />
                </a>
            </div>
        </div>
    </header>
    <div style="width:1180px;margin:auto;">   
        <div class="info right">
            <form  method="post">
                <div class="form-group ">
                    <label for="search">快速查询地址</label>
                    <div class="form-inline">
                        <input class="form-control" id="text_" type="text" placeholder="请输入地点" style="width:262px;" />
                        <input type="button" class="btn btn-default right" value="查 询" onclick="searchByStationName();" />
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label for="longitude">经度</label>
                    <label for="latitude" class="right">纬度</label>
                    <div class="clean"></div>
                    <input class="form-control" id="longitude" type="text" name="lo" style="width:160px;"/>
                    <input class="form-control right" id="latitude" type="text" name="la" style="width:160px;"/>
                </div>
                <div class="form-group ">
                    <label for="name">名称</label>
                    <input class="form-control" type="text" id="title" name="title">
                </div>
                <div class="form-group ">
                    <label for="tid">分类</label>
                    <input class="form-control" type="text" name="tid" id="tid" />
                </div>
                <div class="form-group ">
                    <label for="name">地址</label>
                    <input class="form-control" type="text" id="addr" name="addr" />
                </div>
                <div class="form-group ">
                    <label for="name">其他信息</label>
                    <textarea  class="form-control" name="otherinfo" id="otherinfo" cols="30" rows="10"></textarea>
                </div>
                <input type="submit" class="btn btn-default right" value="提交" onclick="searchByStationName();" />
            </form>
        </div>
        
        <div id="container" 
            style="position: absolute;
                width: 840px; 
                height: 590px; 
                border: 1px solid gray;
                overflow:hidden;">
        </div>
    </div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("饶平", 13);
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小
function searchByStationName() {
    map.clearOverlays();//清空原来的标注
    var keyword = document.getElementById("text_").value;
    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
        document.getElementById("longitude").value = poi.point.lng;
        document.getElementById("latitude").value = poi.point.lat;;
        map.centerAndZoom(poi.point, 13);
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
        map.addOverlay(marker);
        var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    });
    localSearch.search(keyword);
} 
</script>
</html>
<?php 

if($_POST){
    include '../conn.php';
    $lo = empty($_POST['lo'])? die("请输入经纬度"):$_POST['lo'];
    $la = empty($_POST['la'])? die("请输入经纬度"):$_POST['la'];
    $title = empty($_POST['title'])? die("请输入名称"):$_POST['title'];
    $tid = empty($_POST['tid'])? die("请选择分类"):$_POST['tid'];
    $addr = empty($_POST['addr'])? "未填写":$_POST['addr'];
    $otherinfo = empty($_POST['otherinfo'])?"":$_POST['otherinfo'];
    $sql = "insert into `mapdata` (lo,la,title,tid,addr,otherinfo) value ($lo,$la,'$title',$tid,'$addr','$otherinfo')";
    $result = mysql_query($sql) or die("Error in query: $query. ".mysql_error()); 
    echo "<script>alter(坐标添加成功， mysql_insert_id() = ".mysql_insert_id().")</script>"; 
}
 ?>